<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>品优购首页</title>
    <!-- 引入内容 -->
    <link rel="stylesheet" href="./css/common.css" />
    <!-- 初始化代码 -->
    <link rel="stylesheet" href="./css/base.css" />
    <!-- 引入字体图标 -->
    <link rel="stylesheet" href="./font/iconfont.css" />
    <!-- 引入网页图标 -->
    <link rel="icon" href="./img/favicon.ico">
  </head>
  <body>
    <!-- 导航栏开始 -->
    <div class="div">
      <div class="div1 w">
        <p>
          品优购欢迎您! 请登录
          <a class="a1" href="#">免费注册</a>
        </p>
        <ul>
          <li><a href="#">我的订单</a></li>
          <li><a href="#">我的品优购 &#xe611;</a></li>
          <li><a href="#">品优购会员</a></li>
          <li><a href="#">企业采购</a></li>
          <li><a href="#">关注品优购&#xe611;</a></li>
          <li><a href="#">客户服务&#xe611;</a></li>
          <li><a href="#">网站导航&#xe611;</a></li>
        </ul>
      </div>
    </div>
    <!-- 导航栏结束 -->
    <div class="box w">
      <div class="logo">
        <!-- <img src="./img/logo.png" alt="" /> -->
        <h1><a href="#" title="品优购商城">品优购</a></h1>
      </div>
      <div class="box2">
        <input type="text" name="" id="" placeholder="语言开发 " />
        <a class="a1" href="#">搜索</a>
        <a href="#"><span>&#xe641;</span>我的购物车 <span class="yuanjiao">8</span>&#xe635;</a>
        <ul>
          <li><a href="#">优惠购首发</a></li>
          <li><a href="#">亿元优惠</a></li>
          <li><a href="#">9.9元团购</a></li>
          <li><a href="#">每满99减30</a></li>
          <li><a href="#">办公用品</a></li>
          <li><a href="#">电脑</a></li>
          <li><a href="#">通信</a></li>
        </ul>
      </div>
    </div>
    <!-- 分类区 -->
    <div class="header">
      <div class="fenlei w">
        <div class="fenlei1">
          全部商品分类
        </div>
        <ul>
          <li><a href="#">服装城</a></li>
          <li><a href="#">美妆馆</a></li>
          <li><a href="#">传智超市</a></li>
          <li><a href="#">全球购</a></li>
          <li><a href="#">闪购 </a></li>
          <li><a href="#">团购</a></li>
          <li><a href="#">拍卖</a></li>
          <li><a href="#">有趣</a></li>
        </ul>
      </div>
    </div>
    <!-- 版心区 -->
    <div class="article w">
      <div class="article1">
        <ul>
          <li><a href=""> 家用电器</a> <span>&#xe688; </span></li>
          <li><a href="">手机、数码、通信</a><span>&#xe688; </span></li>
          <li><a href="">电脑、办公</a><span>&#xe688; </span></li>
          <li><a href="">家居、家具、家装、厨具</a><span>&#xe688; </span></li>
          <li><a href="">男装、女装、童装、内衣</a><span>&#xe688; </span></li>
          <li><a href="">个户化妆、清洁用品、宠物</a><span>&#xe688; </span></li>
          <li><a href="">鞋靴、箱包、珠宝、奢侈品</a><span>&#xe688; </span></li>
          <li><a href="">运动户外、钟表</a><span>&#xe688; </span></li>
          <li><a href="">汽车、汽车用品</a><span>&#xe688; </span></li>
          <li><a href="">母婴、玩具乐器</a><span>&#xe688; </span></li>
          <li><a href="">食品、酒类、生鲜、特产</a><span>&#xe688; </span></li>
          <li><a href="">医药保健</a><span>&#xe688; </span></li>
          <li><a href="">图书、音像、电子书</a><span>&#xe688; </span></li>
          <li><a href="">彩票、旅行、充值、票务</a><span>&#xe688; </span></li>
          <li><a href="">理财、众筹、白条、保险"</a><span>&#xe688; </span></li>
        </ul>
      </div>
      <div class="article2"></div>
      <div class="article3">
        <p>品优购快报<span>更多</span><span>&#xe688; </span></p>
        <ul>
          <li>
            <a href="#"><span>[特惠]</span>备战开学季 全民半价购数码</a>
          </li>
          <li>
            <a href="#"><span>[特惠]</span>品优稳占家电网购六成份额</a>
          </li>
          <li>
            <a href="#"><span>[特惠]</span>百元中秋全品类礼券限量领</a>
          </li>
          <li>
            <a href="#"><span>[特惠]</span>上品优生鲜 享阳澄湖大闸蟹</a>
          </li>
          <li>
            <a href="#"><span>[特惠]</span>每日享折扣品优品质游</a>
          </li>
        </ul>
        <div class="jingling clearfix">
          <div>话费</div>
          <div>机票</div>
          <div>电影</div>
          <div>游戏</div>
          <div>彩票</div>
          <div>加油</div>
          <div>酒店</div>
          <div>火车</div>
          <div>众筹</div>
          <div>理财</div>
          <div>礼品</div>
          <div>白条</div>
        </div>
        <div class="tupian"></div>
      </div>
    </div>
    <!-- 版心第二排 -->
    <div class="tuijian w">
      <div class="tuijian1 fl">
        &#xe6be;
        <p>今日推荐</p>
      </div>
      <div class="tuijian2">
        <h4>优质好货</h4>
        <p class="blue">满300减100</p>
        <span>满500减200</span>
      </div>
      <div class="tuijian3">
        <h4>品牌尾货</h4>
        <p class="green">满300减100</p>
        <span>团购低至9.9</span>
        <p class="green">团购</p>
      </div>
      <div class="tuijian4">
        <h4>时尚穿搭</h4>
        <p class="red">低至3.6折</p>
        <span>暑假出游季</span>
        <p class="red">闪购</p>
      </div>
      <div class="tuijian5">
        <h4>0点上新</h4>
        <p class="blue">全场包邮</p>
        <span>低至1折</span>
        <p class="blue">闪购</p>
      </div>
    </div>
    <!-- 猜你喜欢 -->
    <div class="lick w">
      <a href="#" class="fl">猜你喜欢</a>
      <span class="fr">换一批&#xe619;</span>
    </div>
    <div class="lick1 w">
      <div class="lick2">
        <div class="tp"></div>
        <div>
          <p>阳光美包新款单肩包女</p>
          <p>包时尚子母包四件套女</p>
          <span>¥116.00</span>
        </div>
      </div>
      <div class="lick3">
        <div class="tp1"></div>
        <div>
          <p>爱仕达 30CM炒锅不粘</p>
          <p>锅NWG8330E电磁炉炒</p>
          <span>¥99.00</span>
        </div>
      </div>
      <div class="lick4">
        <div class="tp2"></div>
        <div>
          <p>捷波朗</p>
          <p>（jabra）BOOSI劲步</p>
          <span>¥245.00</span>
        </div>
      </div>
      <div class="lick5">
        <div class="tp3"></div>
        <div>
          <p>欧普</p>
          <p>JYLZ08面板灯平板灯铝</p>
          <span>¥238.00</span>
        </div>
      </div>
      <div class="lick6">
        <div class="tp4"></div>
        <div>
          <p>三星</p>
          <p>（G5500）移动联</p>
          <span>¥649.00</span>
        </div>
      </div>
      <div class="lick7">
        <div class="tp5"></div>
        <div>
          <p>韩国所望</p>
          <p>紧致湿润精华露400ml</p>
          <span>¥649.00</span>
        </div>
      </div>
    </div>
    <!-- 传智播客区 -->
    <div class="cz w"><p>传智播客 · 有趣区</p></div>
    <div class="chuanzhi w">
      <div class="boke fl">
        <p>传智播客好书榜</p>
        <span>畅销推荐低至一折</span>
        <img src="../品优购作业练习/img/图层130.png" alt="" />
      </div>
      <div class="boke1 fl">
        <h4>好东西</h4>
        <div class="jianpan">
          <h3>达人推荐</h3>
          <p>雷神金属机械键盘</p>
          <span>与你相见恨晚</span>
          <img src="./img/图层131拷贝.png" alt="" />
        </div>
        <div class="yifu">
          <h3>发现好物</h3>
          <p>一不小心霸气外露</p>
          <span>等你来</span>
          <img src="./img/图层133.png" alt="" />
        </div>
      </div>
      <div class="boke2 fl">
        <div class="pin">
          <h4>品牌街</h4>
          <div class="suboer">
            <h3>苏泊尔</h3>
            <p>返场大秀场</p>
            <span>爆品直降100元</span>
            <img src="./img/图层132.png" alt="" />
          </div>
          <div class="suboer1 fl">
            <h3>国际大牌</h3>
            <p>adidas</p>
            <span>部分3免1</span>
            <img class="fr" src="./img/图层134.png" alt="" />
          </div>
          <div class="suboer2 fr">
            <h3>本周特卖</h3>
            <p>大牌折扣</p>
            <span>每周上新</span>
            <img class="fr" src="./img/图层135.png" alt="" />
          </div>
        </div>
      </div>
      <div class="boke3 fl">
        <img src="./img/图层136.png" alt="" />
      </div>
    </div>
    <!-- 家用电器区 -->
    <div class="jiayong w">
      <div class="jy">
        <h4>家用电器</h4>
        <ul>
          <li><a href="#">热门</a></li>
          <li><a href="#">大家电</a></li>
          <li><a href="#">生活电器</a></li>
          <li><a href="#">厨房电器</a></li>
          <li><a href="#">个护健康</a></li>
          <li><a href="#">应季电器</a></li>
          <li><a href="#">空气/净水 </a></li>
          <li><a href="#">新奇特</a></li>
          <li><a href="#">高端电器</a></li>
        </ul>
      </div>
      <div class="dianqi1 fl">
        <a href="#">节能补贴</a>
        <a href="#">4K电视</a>
        <a href="#">空气净化器</a>
        <a href="#">IH电饭煲</a>
        <a href="#">滚筒洗衣机</a>
        <a href="#">电热水器</a>
        <p>三星曲面电视</p>
        <span>抽奖送豪礼</span>
        <img src="./img/图层110.png" alt="" />
      </div>
      <div class="dianqi2 fl">
        <p>烧水壶智能光控泡茶壶茶具套装</p>
        <span>满299.00减40.00</span>
        <img src="./img/图层118.png" alt="" />
      </div>
      <div class="dianqi3 fl">
        <div class="w220">
          <p>每满200减20元</p>
          <span>烘焙节1元抢购</span>
          <img src="./img/图层114.png" alt="" />
        </div>
        <div class="w221">
          <p>买乐视电视享钜惠</p>
          <span>送60个月会员</span>
          <img src="./img/图层116.png" alt="" />
        </div>
      </div>
      <div class="dianqi4 fl">
        <p>8.20彩电宅购节</p>
        <p class="f16">
          65寸4K智能电视3799
        </p>
        <img src="./img/图层113.png" alt="" />
      </div>
      <div class="dianqi3 fl">
        <div class="w220">
          <p>消暑神器全场领券</p>
          <span>1元赢空调</span>
          <img src="./img/图层115.png" alt="" />
        </div>
        <div class="w221">
          <p>买乐视电视享钜惠</p>
          <span>送60个月会员</span>
          <img class="fengshan" src="./img/图层117.png" alt="" />
        </div>
      </div>
      <div class="shangbiao">
        <div class="shangbiao1 w">
          <img src="./img/图层119.png" alt="" />
        </div>
      </div>
    </div>

    <!-- 手机通讯 -->
    <div class="jiayong w">
      <div class="jy">
        <h4>手机通讯</h4>
        <ul>
          <li><a href="#">热门</a></li>
          <li><a href="#">品质优选</a></li>
          <li><a href="#">新机尝鲜</a></li>
          <li><a href="#">高性价比</a></li>
          <li><a href="#">口碑推荐</a></li>
          <li><a href="#">合约机</a></li>
          <li><a href="#">机卡</a></li>
          <li><a href="#">店铺精选</a></li>
          <li><a href="#">手机配件</a></li>
        </ul>
      </div>
      <div class="dianqi1 fl">
        <a href="#">手机通讯</a>
        <a href="#">以旧换新</a>
        <a href="#">双卡双待</a>
        <a href="#">自营配件</a>
        <a href="#">金属机身</a>
        <a href="#">高清屏</a>
        <p>中兴A1 低至499元</p>
        <span>国民指纹，超6万好评</span>
        <img src="./img/图层182.png" alt="" />
      </div>
      <div class="dianqi2 fl" style="background-color: #c6e8b6;">
        <p style="color: #4c852a;">360 N4S限量版</p>
        <span style="color: #4c852a;">1199元抢购</span>
        <img src="./img/图层183.png" alt="" />
      </div>
      <div class="dianqi3 fl">
        <div class="w220">
          <p>Moto X极</p>
          <span>低至¥2999</span>
          <img src="./img/图层187.png" alt="" style="padding-top: 20px;" />
        </div>
        <div class="w221">
          <p>乐max2 限量秒杀</p>
          <span>每日1899秒</span>
          <img src="./img/图层189.png" alt="" style="padding-top: 3px;" />
        </div>
      </div>
      <div class="dianqi4 fl">
        <p style="font-size: 18px;">G9青春版玫瑰金首发</p>
        <p style="font-size: 16px; color: #999999;">
          赢0元试用
        </p>
        <img src="./img/图层186.png" alt="" />
      </div>
      <div class="dianqi3 fl">
        <div class="w220">
          <p>消暑神器全场领券</p>
          <span>1元赢空调</span>
          <img src="./img/图层115.png" alt="" />
        </div>
        <div class="w221">
          <p>买乐视电视享钜惠</p>
          <span>送60个月会员</span>
          <img class="fengshan" src="./img/图层117.png" alt="" />
        </div>
      </div>
      <div class="shangbiao">
        <div class="shangbiao1 w">
          <img src="./img/图层122.png" alt="" />
        </div>
      </div>
    </div>
    <!-- 电脑办公区 -->
    <div class="jiayong w">
      <div class="jy">
        <h4>电脑办公</h4>
        <ul>
          <li><a href="#">热门</a></li>
          <li><a href="#">大家电</a></li>
          <li><a href="#">生活电器</a></li>
          <li><a href="#">厨房电器</a></li>
          <li><a href="#">个护健康</a></li>
          <li><a href="#">应季电器</a></li>
          <li><a href="#">空气/净水 </a></li>
          <li><a href="#">新奇特</a></li>
          <li><a href="#">高端电器</a></li>
        </ul>
      </div>
      <div class="dianqi1 fl">
        <a href="#">节能补贴</a>
        <a href="#">4K电视</a>
        <a href="#">空气净化器</a>
        <a href="#">IH电饭煲</a>
        <a href="#">滚筒洗衣机</a>
        <a href="#">电热水器</a>
        <p>三星曲面电视</p>
        <span>抽奖送豪礼</span>
        <img src="./img/图层110.png" alt="" />
      </div>
      <div class="dianqi2 fl">
        <p>烧水壶智能光控泡茶壶茶具套装</p>
        <span>满299.00减40.00</span>
        <img src="./img/图层118.png" alt="" />
      </div>
      <div class="dianqi3 fl">
        <div class="w220">
          <p>每满200减20元</p>
          <span>烘焙节1元抢购</span>
          <img src="./img/图层114.png" alt="" />
        </div>
        <div class="w221">
          <p>买乐视电视享钜惠</p>
          <span>送60个月会员</span>
          <img src="./img/图层116.png" alt="" />
        </div>
      </div>
      <div class="dianqi4 fl">
        <p>8.20彩电宅购节</p>
        <p class="f16">
          65寸4K智能电视3799
        </p>
        <img src="./img/图层113.png" alt="" />
      </div>
      <div class="dianqi3 fl">
        <div class="w220">
          <p>消暑神器全场领券</p>
          <span>1元赢空调</span>
          <img src="./img/图层115.png" alt="" />
        </div>
        <div class="w221">
          <p>买乐视电视享钜惠</p>
          <span>送60个月会员</span>
          <img class="fengshan" src="./img/图层117.png" alt="" />
        </div>
      </div>
      <div class="shangbiao">
        <div class="shangbiao1 w">
          <img src="./img/图层123.png" alt="" style="height: 66px; width: 1200px;" />
        </div>
      </div>
    </div>

    <!-- 结尾区 -->
    <div class="jiewei">
      <div class="jiewei1">
        <div class="w1">
          <div class="j1"></div>
          <h5>1正品保障</h5>
          <p>正品保障，提供发票</p>
        </div>
        <div class="w2">
          <div class="j2"></div>
          <h5>2正品保障</h5>
          <p>正品保障，提供发票</p>
        </div>
        <div class="w3">
          <div class="j3"></div>
          <h5>正品保障</h5>
          <p>正品保障，提供发票</p>
        </div>
        <div class="w4">
          <div class="j4"></div>
          <h5>正品保障</h5>
          <p>正品保障，提供发票</p>
        </div>
        <div class="w5">
          <div class="j5"></div>
          <h5>正品保障</h5>
          <p>正品保障，提供发票</p>
        </div>
      </div>
      <div class="jiewei2">
        <ul>
          <li><a href="#">购物指南</a></li>
          <li><a href="#">购物流程</a></li>
          <li><a href="#">会员介绍</a></li>
          <li><a href="#">生活旅行/团购</a></li>
          <li><a href="#">常见问题</a></li>
          <li><a href="#">大家电</a></li>
          <li><a href="#">联系客服</a></li>
        </ul>
        <ul>
          <li><a href="#">购物指南</a></li>
          <li><a href="#">购物流程</a></li>
          <li><a href="#">会员介绍</a></li>
          <li><a href="#">生活旅行/团购</a></li>
          <li><a href="#">常见问题</a></li>
          <li><a href="#">大家电</a></li>
          <li><a href="#">联系客服</a></li>
        </ul>
        <ul>
          <li><a href="#">购物指南</a></li>
          <li><a href="#">购物流程</a></li>
          <li><a href="#">会员介绍</a></li>
          <li><a href="#">生活旅行/团购</a></li>
          <li><a href="#">常见问题</a></li>
          <li><a href="#">大家电</a></li>
          <li><a href="#">联系客服</a></li>
        </ul>
        <ul>
          <li><a href="#">购物指南</a></li>
          <li><a href="#">购物流程</a></li>
          <li><a href="#">会员介绍</a></li>
          <li><a href="#">生活旅行/团购</a></li>
          <li><a href="#">常见问题</a></li>
          <li><a href="#">大家电</a></li>
          <li><a href="#">联系客服</a></li>
        </ul>
        <ul>
          <li><a href="#">购物指南</a></li>
          <li><a href="#">购物流程</a></li>
          <li><a href="#">会员介绍</a></li>
          <li><a href="#">生活旅行/团购</a></li>
          <li><a href="#">常见问题</a></li>
          <li><a href="#">大家电</a></li>
          <li><a href="#">联系客服</a></li>
        </ul>
        <ul>
          <li>
            <a href="#">帮助中心</a>
          </li>
          <li><div class="er"></div></li>
          <li><a href="#">品优购客户端</a></li>
        </ul>
      </div>
      <div class="jiewei3 w">
        <ul>
          <li><a href="#">关于我们</a></li>
          <li><a href="#">联系我们</a></li>
          <li><a href="#">联系客服</a></li>
          <li><a href="#">商家入驻</a></li>
          <li><a href="#">营销中心</a></li>
          <li><a href="#">手机品优购</a></li>
          <li><a href="#">友情链接</a></li>
          <li><a href="#">销售联盟</a></li>
          <li><a href="#">品优购社区</a></li>
          <li><a href="#">品优购公益</a></li>
          <li><a href="#">English Site </a></li>
          <li><a href="#">Contact U</a></li>
        </ul>
      </div>
      <div class="jiewei4">
        <p>
          地址：北京市昌平区建材城西路金燕龙办公楼一层 邮编：100096 电话：400-618-4000 传真：010-82935100 邮箱: zhanghj+itcast.cn
        </p>
        <p>京ICP备08001421号京公网安备110108007702</p>
      </div>
    </div>
  </body>
</html>
